<template>

  <div id="confirmOrder" class="confirmOrder">
    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <a @click="$router.go(-1)" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
      <span slot="center" style="font-size:18px">确认订单</span>
    </yd-navbar>
    <!-- content -->
    <div class="content-confirmOrder" fixed>
      <el-row :span="8">
        <!-- 收获地址 -->
        <el-card :body-style="{ padding: '0px' }">
          <div style="padding: 14px;text-align:left;font-size: 15px;">
            <span>{{address.receiverName}}     {{address.receiverMobile}}  
            <router-link to="/user/shipping">
            <yd-icon name="feedback" size="20px" color="#666" style="float:right"></yd-icon>
            </router-link>
            </span>
            <div class="bottom clearfix">
              <time class="time">
                <yd-icon name="location" size="20px"></yd-icon> 默认地址：{{address.receiverAddress}}</time>
            </div>
          </div>
        </el-card>
        <!-- 订单商品列表 -->
        <div v-for="(item, idx) in goods" :val="idx">
          <el-card style="padding-bottom:15px;text-align:left">
            <img :src="item.productMainImage" class="demo-checklist-img" style="display:inline-block;float:left">
            <div style="display:inline-block;margin-left:5px;height:100px;width:70%">
              <span class="order-text">{{item.productName}}</span><br/>
              <span class="order-text" style="color: #ccc;">颜色：粉色系  &emsp;  尺码：s</span><br/>
              <span class="order-text" style="color:#ef4f4f;font-size:15px">￥{{item.productTotalPrice}} </span>
              <span style="float:right">
                    <span>x {{item.quantity}}</span>
              </span>
            </div>
          </el-card>
        </div>
        <!-- 买家说明 -->
        <el-card>
          <div style="text-align:left">
            <yd-badge shape="square" type="danger">全场包邮</yd-badge>
            <yd-badge shape="square" type="danger">七天退换</yd-badge>
          </div>
          <div style="text-align:left">
            <span style="display:inline-block;font-size:14px;margin-top:10px;">买家留言：</span>
            <yd-input slot="right" v-model.trim="leaveWords" placeholder="可以填写购买说明" style="display:inline-block;width:70%">
            </yd-input>
          </div>
        </el-card>
      </el-row>
      <!-- footer -->
      <div class="selectAll">
        <div class="text" style="display:inline-block;width:30%;text-align:left;padding-left:3%;">
          <span>共计：{{cartTotalPrice}}￥</span>
        </div>
        <div class="text" style="font-size:15px">
          实付款：<span style="color:#ef4f4f;font-weight:600">{{cartTotalPrice}}￥</span>
        </div>
        <yd-button type="danger" @click.native="createOrder()">提交订单</yd-button>
      </div>
    </div>
  </div>
  </div>

</template>

<script>
  import baseService from '../../axios/'
  export default {
    name: 'confirmOrder',
    data() {
      return {
        message: '确认订单',
        address: this.$store.store.state.firstAddress,
        goods: this.$store.store.state.cartClickList,
        goods2: this.$store.store.state.goodsNow,
        // show1: false,
        // show2: false,
        leaveWords: '',
        cartTotalPrice: 0,
        checklist3: [],
        cartIds: []
      }
    },
    created() {
      this.setAddress();
      // this.stu();
    },
    mounted() {
      // 在购物车中的结算方式
      // if(this.$store.store.state.cartbuy == true){
        // //开始时把对方false掉
        // this.$store.store.state.buy = false;
        // this.show1 = true;
        // this.show2 = false;
        // console.log("执行了购物车中购买");
        this.goods.forEach((item) => {
          this.cartTotalPrice += item.productTotalPrice;
        });
        //结束时把自己false掉
        // this.$store.store.state.cartbuy = false;
      // }
      
      // // 直接购买方式
      // if (this.$store.store.state.buy == true) {
      //     //开始时把对方false掉
      //     this.$store.store.state.cartbuy = false;
      //     this.show2 = true;
      //     this.show1 = false;
      //     console.log("确认订单goods2：",this.goods2);
      //     //todo 选择数量重新计算总价；
      //     this.cartTotalPrice = this.$store.store.state.goodsNow.price;
      //   } 
      //   //结束时把自己false掉
      //   this.$store.store.state.buy == false;
    },
    methods: {
      //获取收获地址列表，设置没有默认收获地址时，默认列表为第一个；
      setAddress() {
        if (!this.$store.store.state.firstAddress.id) {
          baseService.post('/shipping/list.do').then((res) => {
            if (res.data.status == 0) {
              console.log(res.data.data.list)
              this.$store.store.state.firstAddress = res.data.data.list[0];
            }
          })
        }
      },
      createOrder() {
        // console.log(this.goods);
        // console.log(this.cartTotalPrice);
        if (this.cartTotalPrice > 0 && this.$store.store.state.firstAddress.id) {

          let param = new URLSearchParams();
          let id = this.$store.store.state.firstAddress.id;
          let price = this.cartTotalPrice;
          let cartIds = this.$store.store.state.orderGoodsIds;
          param.append("shippingId", id);
          param.append("orderPrice", price);
          param.append("cartIds", cartIds);
          // //购物车中结算
          // if(this.show1 == true){
            
            
            // console.log("执行了show1，cartIds=",cartIds, typeof cartIds);
          // }
          // //立即购买：将该商品添加进购物车，并选中商品id.
          // if(this.show2 == true){
          //   this.cartIds = [];
          //   this.cartIds.push(this.goods2.id);
          //   param.append("cartIds", this.cartIds);
          //   console.log("执行了show2，cartIds=",this.cartIds, typeof this.cartIds);
          // }
          baseService.post('/order/createParamOrder.do', param).then((res) => {
            if (res.data.status == 0) {
              console.log(res.data.data)
              this.$dialog.alert({
                mes: "订单提交成功"
              });
            }
          })
        }

      }

      // getTotalPrice(product) {
      //   this.cartTotalPrice = 0;
      //   this.cartTotalPrice +=product.productTotalPrice;
      // }
    }
  }

</script>

<style scoped>
  .confirmOrder .content-confirmOrder {
    position: fixed;
    padding-top: 15%;
    height: 90%;
    width: 100%;
    overflow-y: auto !important;
  }

  .content-confirmOrder .yd-cell-item {
    border-bottom: solid !important;
    border-bottom-color: #f2f2f2 !important;
  }

  .content-confirmOrder .time {
    font-size: 13px;
    color: #999;
    display: inline;
  }

  .content-confirmOrder .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .content-confirmOrder .el-card__body .button {
    padding: 0;
    float: right;
  }

  .content-confirmOrder .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .content-confirmOrder .clearfix:after {
    clear: both
  }
  /* 列表样式 */

  .demo-checklist-img {
    height: 100px;
  }

  .yd-flexbox-item-start {
    text-align: left;
  }

  .confirmOrder-text {
    display: block;
    margin-left: 5px;
  }

  .confirmOrder-text .num {
    border: solid 1px #ccc;
    padding: 5px;
  }
  /* 全选 */

  .confirmOrder .content-confirmOrder .selectAll {
    z-index: 5 !important;
    width: 100% !important;
    position: fixed !important;
    /*固定位置，不随页面移动*/
    bottom: 0.2% !important;
    height: 8% !important;
    text-align: left !important;
    border-top: solid 1px #e4e4e4 !important;
    background-color: #fff !important;
  }

  .selectAll .text {
    display: inline-block;
    line-height: 50px;
    width: 40%;
    text-align: right;
  }

  .selectAll .yd-btn {
    display: inline-block;
    float: right;
    margin: 1.5%;
    margin-top: auto 5px !important;
    height: 80%;
    font-size: 13px;
    font-weight: 600;
  }

  .order-text {
    display: inline-block;
    margin-bottom: 15px !important;
  }

</style>
